<!DOCTYPE html>
<html>

<head>
    <link rel="stylesheet" type="text/css" href="css/reset.min.css">
    <title>实用工具箱 V1.0.0</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
            text-align: center;
        }

        h1 {
            font-size: 24px;
            margin: 0 auto 0 auto;
        }

        body div {
            background-color: #fff;
            padding: 20px;
            display: grid;
            grid-template-columns: repeat(5, 1fr);
            justify-items: center;
            align-items: center;
            width: 920px;
            margin-left: auto;
            margin-right: auto;
        }

        button {
            padding: 20px;
            margin: 2px;
            font-size: 16px;
            background-color: #007bff;
            color: #fff;
            border: none;
            border-radius: 10px;
            cursor: pointer;
            transition: transform 0.3s ease, box-shadow 0.1s ease;
            width: 180px;
            height: 180px;
        }

        button:hover {
            transform: translateY(-10px);
            border: 1px solid #006bdd;
            box-shadow: 0 10px 10px rgba(0, 0, 0, 0.2);
        }
    </style>
</head>

<body>
    <h1>实用工具箱 V1.0.0</h1>
    <div>
        <button onclick="window.location.href = '/image-format-conversion-tool';">图片格式转换</button>
        <button onclick="window.location.href = '/pdf2image-tool';">PDF转图片</button>
        <button onclick="window.location.href = '/image2pdf-tool';">图片转PDF</button>
        <button onclick="window.location.href = '/remove-watermark-tool';">图片去水印<br>（灰度范围）</button>
        <button onclick="window.location.href = '/remove-watermark-tool-rgb';">图片去水印<br>（RGB值）</button>
        <button onclick="window.location.href = '/add-watermark-tool-image';">图片加水印<br>（图片）</button>
        <button onclick="window.location.href = '/add-watermark-tool-text';">图片加水印<br>（文字）</button>
        <button id="clearCacheButton">清空缓存</button>
    </div>
    <script>
        document.getElementById('clearCacheButton').addEventListener('click', function () {
            var clearCacheButton = this;
            clearCacheButton.disabled = true; // 禁用按钮

            Promise.all([
                fetch('/clear-image-cache').then(function (response) {
                    return response.text();
                }),
                fetch('/clear-pdf-cache').then(function (response) {
                    return response.text();
                })
            ])
                .then(function (results) {
                    console.log(results[0]); // 清除图片缓存的结果
                    console.log(results[1]); // 清除PDF缓存的结果

                    var countDown = 10; // 倒计时秒数
                    clearCacheButton.innerHTML = '缓存已清空<br>（' + countDown + 's）'; // 更新按钮文本
                    clearCacheButton.style.backgroundColor = 'gray'; // 更改按钮背景颜色

                    var timer = setInterval(function () {
                        countDown--;
                        clearCacheButton.innerHTML = '缓存已清空<br>（' + countDown + 's）'; // 更新按钮文本

                        if (countDown <= 0) {
                            clearInterval(timer);
                            clearCacheButton.textContent = '清空缓存'; // 恢复按钮文本
                            clearCacheButton.style.backgroundColor = ''; // 恢复按钮背景颜色（使用默认值）
                            clearCacheButton.disabled = false; // 启用按钮
                        }
                    }, 1000); // 每秒更新倒计时
                })
                .catch(function (error) {
                    console.error('Clear cache error:', error);
                    clearCacheButton.disabled = false; // 启用按钮（如果发生错误）
                });
        });
    </script>
</body>

</html>